// 所有的全局自定义指令
// 写好自定义指令 指令名，生命周期   去main.js注册
import employeesData from '@/api/constant/employees.js'
import moment from 'moment'
import store from '@/store'
let clickOutside = ''
export default {
  //    指令名:生命周期
  errorimg: {
    // 这个生命周期只执行一次，要是后面更新有其它问题也需要解决，
    // 如果图片img没有src,它是不会报错的  也要给它默认图片
    inserted (dom, obj) {
      // 当你图片有src，就使用你的src,没有就使用默认图片
      // 如果图片加载出问题，指定头像
      dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
      // 图片出错了,这是一个监听函数，执行一次后会一直存在
      dom.onerror = () => {
        // 图片加载出错时会执行
        // 如果出错了，就给它一个默认图片

        dom.src = obj.value || require('@/assets/common/head.jpg')
      }
    },
    // 当指令所在组件有更新且更新完成后执行
    componentUpdated (dom, obj) {
      dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
    }
  },
  xxx: {},
  // 转换数据
  formatType: {
    /*
    生命周期
    bind,inserted,update,componentUpdated,unbind
    */
    inserted (dom, obj) {
      // dom内的值要改变  dom.innerHTML
      // obj.value自定义指令的值
      const result = employeesData.hireType.find(item => item.id === obj.value)
      dom.innerHTML = result ? result.value : '-'
    },
    componentUpdated (dom, obj) {
      const result = employeesData.hireType.find(item => item.id === obj.value)
      dom.innerHTML = result ? result.value : '-'
    }
  },
  // 作用：点击某个dom区域外作出一些事件处理
  clickOutside: {
    inserted (dom, obj) {
      clickOutside = e => {
        // 点击当前指令所在dom区域外才执行相应方法
        // 当前点击的dom是否属于指令所在dom内
        // 指令所在dom包含点击的dom  contains
        // console.log('clickOutside')
        // e.target就是当前点击的dom
        if (!dom.contains(e.target)) {
          obj.value()
        }
      }
      document.addEventListener('click', clickOutside)
    },
    unbind () {
      document.removeEventListener('click', clickOutside)
    }
  },
  // 定义一个自定义指令用于时间转换处理
  formatTime: {
    // moment插件使用： 1：安装  2：导入  3：转换  moment(时间).format('YYYY-MM-DD')
    inserted (dom, obj) {
      dom.innerHTML = moment(obj.value).format('YYYY-MM-DD')
    },
    componentUpdated (dom, obj) {
      dom.innerHTML = moment(obj.value).format('YYYY-MM-DD')
    }
  },
  // 按钮权限处理：按钮是否显示的控制
  btnControl: {
    inserted (dom, obj) {
      // obj.value就拿到了employees_import_btn
      if (!store.state.user.userInfo.roles.points.includes(obj.value)) {
        // 没权限就让你不显示
        dom.style.display = 'none'
      }
    }
  }
}
